<template>
  <div class="attendance-container">
    <div class="page-header">
      <router-link class="back-link" to="/">
        <i class="el-icon-arrow-left"></i>
        返回
      </router-link>
      <h1>考勤系统</h1>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-time"></i>
          <span>考勤管理系统</span>
        </div>
        <div class="section-desc">员工考勤打卡与管理</div>
      </div>

      <div class="feature-grid">
        <!-- 员工信息 -->
        <router-link class="feature-card" to="/Information1">
          <div class="card-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="card-content">
            <h3>员工信息</h3>
            <p>查看员工基本信息</p>
          </div>
        </router-link>

        <!-- 考勤打卡 -->
        <router-link class="feature-card" to="/main/renshi/kaoqing/clockin">
          <div class="card-icon">
            <i class="el-icon-check"></i>
          </div>
          <div class="card-content">
            <h3>考勤打卡</h3>
            <p>员工每日打卡记录</p>
          </div>
        </router-link>

        <!-- 考勤规则 -->
        <router-link class="feature-card" to="/Information2">
          <div class="card-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="card-content">
            <h3>考勤规则</h3>
            <p>考勤制度与规则</p>
          </div>
        </router-link>

        <!-- 考勤数据 -->
        <router-link class="feature-card" to="/Information3">
          <div class="card-icon">
            <i class="el-icon-data-line"></i>
          </div>
          <div class="card-content">
            <h3>考勤数据</h3>
            <p>考勤记录查询统计</p>
          </div>
        </router-link>

        <!-- 请假管理 -->
        <router-link class="feature-card" to="/Information4">
          <div class="card-icon">
            <i class="el-icon-date"></i>
          </div>
          <div class="card-content">
            <h3>请假管理</h3>
            <p>员工请假申请处理</p>
          </div>
        </router-link>

        <!-- 加班管理 -->
        <router-link class="feature-card" to="/Information5">
          <div class="card-icon">
            <i class="el-icon-alarm-clock"></i>
          </div>
          <div class="card-content">
            <h3>加班管理</h3>
            <p>加班申请与审批</p>
          </div>
        </router-link>

        <!-- 数据统计 -->
        <router-link class="feature-card" to="/Information6">
          <div class="card-icon">
            <i class="el-icon-pie-chart"></i>
          </div>
          <div class="card-content">
            <h3>数据统计</h3>
            <p>考勤数据分析</p>
          </div>
        </router-link>

        <!-- 异常处理 -->
        <router-link class="feature-card" to="/Information7">
          <div class="card-icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="card-content">
            <h3>异常处理</h3>
            <p>考勤异常处理</p>
          </div>
        </router-link>

        <!-- 报表导出 -->
        <router-link class="feature-card" to="/Information8">
          <div class="card-icon">
            <i class="el-icon-download"></i>
          </div>
          <div class="card-content">
            <h3>报表导出</h3>
            <p>考勤报表生成</p>
          </div>
        </router-link>

        <!-- 系统设置 -->
        <router-link class="feature-card" to="/Information9">
          <div class="card-icon">
            <i class="el-icon-setting"></i>
          </div>
          <div class="card-content">
            <h3>系统设置</h3>
            <p>考勤系统配置</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SignIn"
};
</script>

<style lang="scss" scoped>
.attendance-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409EFF;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 32px;

    .section-header {
      text-align: center;
      margin-bottom: 40px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409EFF, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 14px;
      }
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 0 20px;

      .feature-card {
        background: #fff;
        border: 1px solid #ebeef5;
        border-radius: 12px;
        padding: 20px;
        text-decoration: none;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
          border-color: #409EFF;

          .card-icon {
            background: linear-gradient(135deg, #409EFF, #66b1ff);
            
            i {
              color: white;
            }
          }

          .card-content {
            h3 {
              color: #409EFF;
            }
          }
        }

        .card-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: #f5f7fa;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16px;
          transition: all 0.3s ease;

          i {
            font-size: 24px;
            color: #409EFF;
          }
        }

        .card-content {
          h3 {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            transition: color 0.3s ease;
          }

          p {
            margin: 0;
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .attendance-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;
          
          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0;

        .feature-card {
          padding: 16px;

          .card-icon {
            width: 40px;
            height: 40px;

            i {
              font-size: 20px;
            }
          }

          .card-content {
            h3 {
              font-size: 14px;
            }

            p {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>